<template>
  <span>
    <el-tag
      checked
      class="card-item"
      v-for="(tag, index) in tags"
      :key="tag.tagId || index"
      :type="tagItems[index % tagItems.length]"
      style="cursor: pointer;"
      @click="toTagArticles(tag.name)"
    >{{ tag.name }}</el-tag>
  </span>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { Tag } from '@/api/type'
import { useRouter } from 'vue-router'

const router = useRouter()

defineProps<{
  tags?: Tag[]
}>()

const tagItems = ref<("" | "info" | "success" | "warning" | "danger")[]>([
  '',
  'success',
  'info',
  'danger',
  'warning'
])

const toTagArticles = async (name?: string) => {
  router.push({ path: '/tag/' + name })
}
</script>

<style lang="less" scoped>
.card-item {
  margin: 5px;
  size: small;
}
</style>
